<script lang="ts" setup>
import * as echarts from 'echarts/core'
import { GridComponent, TooltipComponent } from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { getUserDistributionAdminApi } from '@/request/api/user'
import {
  type AuthorizeCountVO,
  getAuthorizeCountApi,
  getServiceCountApi,
  getSystemCountApi,
  initAuthorizeCountVO,
  initServiceCountVO,
  initSystemCountVO,
  type ServiceCountVO,
  type SystemCountVO
} from '@/request/api'

echarts.use([TooltipComponent, GridComponent, BarChart, CanvasRenderer])

const option: any = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '0.2%',
    right: '0.5%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisTick: {
        alignWithLabel: true
      },
      offset: 20,
      axisLabel: {
        //interval设置成 0 强制显示所有标签
        interval: 0,
        //可以通过旋转解决标签显示不下的问题
        rotate: 20,
        // 居中显示
        align: 'center'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      interval: 1,
      name: '人数',
      axisLabel: {
        shadowOffsetX: 10
      }
    }
  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      barWidth: '60%',
      data: [],
      label: {
        show: true,
        position: 'top'
      }
    }
  ]
}

const getUserDistributionAdmin = () => {
  getUserDistributionAdminApi().then((res) => {
    option.xAxis[0].data.push(...res.data['keys'])
    option.series[0].data.push(...res.data['values'])
    const chartDom = document.getElementById('main')!
    const myChart = echarts.init(chartDom)
    option && myChart.setOption(option)
  })
}

const authorizeCount = ref<AuthorizeCountVO>(initAuthorizeCountVO())
const serviceCount = ref<ServiceCountVO>(initServiceCountVO())
const systemCount = ref<SystemCountVO>(initSystemCountVO())

const getCount = () => {
  getAuthorizeCountApi().then((res) => {
    authorizeCount.value = res.data
  })
  getServiceCountApi().then((res) => {
    serviceCount.value = res.data
  })
  getSystemCountApi().then((res) => {
    systemCount.value = res.data
  })
}

onMounted(() => {
  getUserDistributionAdmin()
  getCount()
})
</script>

<template>
  <el-container class="p-5 gap-2" direction="vertical">
    <span>权限模块</span>
    <el-container class="gap-5 flex-wrap">
      <span class="flex min-w-52 px-5 py-8 text-lg use-radius-xs bg-amber-300">
        <SvgIcon
          :message="'用户 ' + authorizeCount.user + ' 个'"
          name="people"
          svg-class="!size-[18px]"
        />
      </span>
      <span class="flex min-w-52 px-5 py-8 text-lg use-radius-xs bg-fuchsia-300">
        <SvgIcon
          :message="'角色 ' + authorizeCount.role + ' 个'"
          name="authority"
          svg-class="!size-[18px]"
        />
      </span>
    </el-container>
    <span class="mt-3">系统模块</span>
    <el-container class="gap-5 flex-wrap">
      <span class="flex min-w-52 px-5 py-8 text-lg use-radius-xs bg-cyan-300">
        <SvgIcon
          :message="'类别 ' + systemCount.classify + ' 个'"
          name="classify"
          svg-class="!size-[18px]"
        />
      </span>
      <span class="flex min-w-52 px-5 py-8 text-lg use-radius-xs bg-emerald-300">
        <SvgIcon
          :message="'标签 ' + systemCount.label + ' 个'"
          name="label"
          svg-class="!size-[18px]"
        />
      </span>
      <span class="flex min-w-52 px-5 py-8 text-lg use-radius-xs bg-cyan-300">
        <SvgIcon
          :message="'资源 ' + systemCount.resources + ' 个'"
          name="resources"
          svg-class="!size-[18px]"
        />
      </span>
      <span class="flex min-w-52 px-5 py-8 text-lg use-radius-xs bg-lime-300">
        <SvgIcon
          :message="'路由 ' + systemCount.router + ' 个'"
          name="router-link"
          svg-class="!size-[18px]"
        />
      </span>
    </el-container>
    <span class="mt-3">业务模块</span>
    <el-container class="gap-5 flex-wrap">
      <span class="flex min-w-52 px-5 py-8 text-lg use-radius-xs bg-red-300">
        <SvgIcon
          :message="'友链 ' + serviceCount.website + ' 个'"
          name="friend-link"
          svg-class="!size-[18px]"
        />
      </span>
      <span class="flex min-w-52 px-5 py-8 text-lg use-radius-xs bg-teal-300">
        <SvgIcon
          :message="'文章 ' + serviceCount.article + ' 篇'"
          name="note"
          svg-class="!size-[18px]"
        />
      </span>
      <span class="flex min-w-52 px-5 py-8 text-lg use-radius-xs bg-blue-300">
        <SvgIcon
          :message="'相册 ' + serviceCount.album + ' 个'"
          name="picture"
          svg-class="!size-[18px]"
        />
      </span>
      <span class="flex min-w-52 px-5 py-8 text-lg use-radius-xs bg-green-300">
        <SvgIcon
          :message="'留言 ' + serviceCount.treeHole + ' 条'"
          name="email"
          svg-class="!size-[18px]"
        />
      </span>
      <span class="flex min-w-52 px-5 py-8 text-lg use-radius-xs bg-gray-300">
        <SvgIcon
          :message="'评论 ' + serviceCount.comment + ' 条'"
          name="message"
          svg-class="!size-[18px]"
        />
      </span>
      <span class="flex min-w-52 px-5 py-8 text-lg use-radius-xs bg-indigo-300">
        <SvgIcon
          :message="'点赞 ' + serviceCount.like + ' 个'"
          name="praise"
          svg-class="!size-[18px]"
        />
      </span>
    </el-container>
    <div id="main" class="h-96 w-full"></div>
  </el-container>
</template>

<style lang="scss" scoped></style>
